<template>
	<view class="addition-MP" :style="'top:' + top + ';right:' + right">
		<uv-transition :show="additionShow" mode="fade">
			<view class="addition-box">
				<view class="content">点击“ <text style="vertical-align: middle;"
						class="dy-iconfont icon-weixinxiaochengxudian"></text> ”添加到我的小程序，方便下次访问</view>
				<view class="dy-iconfont icon-a-bianzu69" @tap.stop.prevent="close"></view>
			</view>
		</uv-transition>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	const app = getApp();
	export default {
		mixins: [mp],
		data() {
			return {
				additionShow: true,
				right: '12rpx',
				top: 0,
			}
		},
		onShow() {
			let addition = uni.getStorageSync('addition-MP-timt');
			var newTime = new Date().getTime();
			if (addition) {
				if (newTime > addition) {
					this.additionShow = true
				} else {
					this.additionShow = false
				}
			} else {
				this.additionShow = true
			}
		},
		created() {
			let addition = uni.getStorageSync('addition-MP-timt');
			var newTime = new Date().getTime();
			if (addition) {
				if (newTime > addition) {
					this.additionShow = true
				} else {
					this.additionShow = false
				}
			} else {
				this.additionShow = true
			}
			this.top = this.mp.menuButtonHeight + this.mp.statusBarHeight + 15 + 'px'
		},
		methods: {
			close() {
				var oldtime = new Date();
				oldtime = oldtime.setDate(oldtime.getDate() + 1); //模拟24小时后的时间
				uni.setStorageSync('addition-MP-timt', oldtime);
				this.additionShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addition-MP {
		position: fixed;
		top: 100px;
		right: 100px;
		z-index: 99999;

		.addition-box {
			width: 298rpx;
			// height: 105rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 16rpx 23rpx 16rpx 16rpx;
			box-shadow: 0rpx 0rpx 19rpx 0rpx rgba(198,204,202,0.56);
			display: flex;
			align-content: flex-start;
			position: relative;

			&::after {
				font-family: "dy-iconfont";
				content: "\e6af";
				font-size: 24rpx;
				color: #fff;
				position: absolute;
				top: 0;
				right: 100rpx;
				transform: translate(0, -76%);
			}

			.content {
				font-size: 22rpx;
				font-weight: 400;
				color: #282D2D;
				line-height: 30rpx;
			}

			.icon-a-bianzu69 {
				font-size: 21rpx
			}
		}
	}
</style>